<template>
   <!-- 雷达图组件 -->
   <!-- 图标 这个 div 必须给个宽高 不然实现不了-->
   <div ref="myDiv" class="radar-echart"></div>
</template>

<script>
// 完整的加载过程
// var echarts = require('echarts')
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts')
// 引入雷达图
require('echarts/lib/chart/radar')
// 引入提示框和标题组件
import { LegendComponent } from 'echarts/components'
echarts.use([LegendComponent])
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
   // 页面渲染完毕，获取真实的 dom 对象
   mounted() {
      // 得到一个 echarts 的实例
      const myChart = echarts.init(this.$refs.myDiv)
      myChart.setOption({
         title: {
            text: '基础雷达图'
         },
         tooltip: {},
         legend: {
            data: [
               '预算分配（Allocated Budget）',
               '实际开销（Actual Spending）'
            ]
         },
         radar: {
            // shape: 'circle',
            name: {
               textStyle: {
                  color: '#fff',
                  backgroundColor: '#999',
                  borderRadius: 3,
                  padding: [3, 5]
               }
            },
            // 每一个区域的最高值
            indicator: [
               { name: '工作效率', max: 100 },
               { name: '考勤', max: 100 },
               { name: '积极性', max: 100 },
               { name: '帮助同事', max: 100 },
               { name: '自主学习', max: 100 },
               { name: '正确率', max: 100 }
            ]
         },
         series: [
            {
               name: '预算 vs 开销（Budget vs spending）',
               type: 'radar',
               // areaStyle: {normal: {}},
               data: [
                  {
                     value: [10, 1, 100, 5, 100, 0],
                     name: '张三'
                  },
                  {
                     value: [50, 50, 100, 100, 100, 10],
                     name: '李四'
                  }
               ]
            }
         ]
      })
   }
}
</script>

<style>
.radar-echart {
   width: 600px;
   height: 400px;
}
</style>
